<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pageNew/pages/invoice/index" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">查看发票</text>
					</view>
				</navigator>
			</view>
			<view slot="right" class="navbar-right">
				<!-- 编辑/删除使用view标签 -->
				<view class="nav-btn edit-btn" @click="editInvoice">编辑</view>
				<view class="nav-btn delete-btn" @click="deleteInvoice">删除</view>
			</view>
		</u-navbar>

		<!-- 主内容区 - 增加底部内边距，避免被固定按钮遮挡 -->
		<view class="content-container">
			<!-- 发票详情卡片 -->
			<view class="form-card mb-4">
				<view class="invoice-header flex justify-between items-center mb-4">
					<text class="invoice-title text-lg font-medium">{{ invoice.title }}</text>
					<!-- 用:class数组形式绑定，适配小程序语法 -->
					<view :class="['status-tag', statusClass]">
						<text class="status-tag-text">{{ statusText }}</text>
					</view>
				</view>

				<view class="invoice-details space-y-3">
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">发票类型:</text>
						<text class="detail-value text-sm">{{ invoiceTypeText }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">发票号码:</text>
						<text class="detail-value text-sm">{{ invoice.invoiceNo }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">开票日期:</text>
						<text class="detail-value text-sm">{{ invoice.date }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">开票方:</text>
						<text class="detail-value text-sm">{{ invoice.seller }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">发票金额:</text>
						<text class="detail-value text-sm font-medium">¥{{ formatCurrency(invoice.amount) }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">税率:</text>
						<text class="detail-value text-sm">{{ invoice.taxRate }}%</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">税额:</text>
						<text class="detail-value text-sm font-medium">¥{{ formatCurrency(invoice.taxAmount) }}</text>
					</view>
					<view class="detail-item flex">
						<text class="detail-label text-sm text-gray-500 w-24">备注:</text>
						<text class="detail-value text-sm">{{ invoice.remark || '无' }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 - 固定到底部 -->
		<view class="fixed-operation-buttons">
			<view class="button-container grid grid-cols-2 gap-3">
				<button class="btn primary-btn flex items-center justify-center" @click="handleInvoiceAction"
					v-if="invoice.status === 'pending'">
					<u-icon name="checkmark" color="#ffffff" size="16" class="mr-2"></u-icon>
					<text>认证发票</text>
				</button>
				<button class="btn danger-btn flex items-center justify-center" @click="handleInvoiceInvalid"
					v-if="invoice.status !== 'invalid'">
					<u-icon name="close" color="#ffffff" size="16" class="mr-2"></u-icon>
					<text>作废发票</text>
				</button>
			</view>
		</view>

		<!-- 删除确认弹窗 -->
		<view class="modal-overlay" :class="{ hidden: !showDeleteModal }">
			<view class="modal-container">
				<view class="modal-header border-b border-gray-200">
					<text class="modal-title">确认删除</text>
				</view>
				<view class="modal-content">
					<text class="modal-message">您确定要删除这张发票记录吗？删除后将无法恢复。</text>
					<view class="modal-buttons flex justify-end space-x-2">
						<view class="modal-btn cancel-btn" @click="toggleDeleteModal">取消</view>
						<view class="modal-btn confirm-btn danger" @click="confirmDelete">删除</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作确认弹窗 -->
		<view class="modal-overlay" :class="{ hidden: !showActionModal }">
			<view class="modal-container">
				<view class="modal-header border-b border-gray-200">
					<text class="modal-title">{{ actionType === 'certify' ? '确认认证' : '确认作废' }}</text>
				</view>
				<view class="modal-content">
					<text class="modal-message">
						{{ actionType === 'certify' ? '您确定要认证这张发票吗？' : '您确定要作废这张发票吗？此操作不可撤销。' }}
					</text>
					<view class="modal-buttons flex justify-end space-x-2">
						<view class="modal-btn cancel-btn" @click="toggleActionModal">取消</view>
						<view :class="['modal-btn', 'confirm-btn', actionType === 'certify' ? 'primary' : 'danger']"
							@click="confirmAction">
							{{ actionType === 'certify' ? '认证' : '作废' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 发票数据
				invoice: {},
				// 删除确认弹窗
				showDeleteModal: false,
				// 操作确认弹窗
				showActionModal: false,
				actionType: 'certify' // 'certify' 或 'invalid'
			};
		},
		computed: {
			// 计算属性：发票状态对应的动态类名（适配小程序:class语法）
			statusClass() {
				switch (this.invoice.status) {
					case 'pending':
						return 'status-tag-pending';
					case 'completed':
						return 'status-tag-completed';
					case 'invalid':
						return 'status-tag-invalid';
					default:
						return 'status-tag-default';
				}
			},
			// 计算属性：发票状态文本
			statusText() {
				const statusMap = {
					'pending': '待认证',
					'completed': '已认证',
					'invalid': '已作废'
				};
				return statusMap[this.invoice.status] || '';
			},
			// 计算属性：发票类型文本
			invoiceTypeText() {
				const typeMap = {
					'special': '增值税专用发票',
					'ordinary': '增值税普通发票',
					'electronic': '电子发票',
					'motor': '机动车销售统一发票',
					'other': '其他发票'
				};
				return typeMap[this.invoice.type] || '';
			}
		},
		onLoad(options) {
			console.log('查看发票页面加载完成', options);
			// 获取发票ID
			const invoiceId = options.id;
			// 获取本地存储的发票数据
			let invoices = uni.getStorageSync('invoices') || [];
			// 查找对应的发票
			const foundInvoice = invoices.find(inv => inv.id === invoiceId);

			if (foundInvoice) {
				this.invoice = foundInvoice;
			} else {
				// 默认数据
				this.invoice = {
					id: '1',
					title: '办公用品',
					invoiceNo: '110012345678',
					type: 'special',
					date: '2024-10-20',
					amount: 1500.00,
					status: 'pending',
					seller: '北京办公设备有限公司',
					taxRate: 13,
					taxAmount: 172.57,
					remark: '购买打印机和纸张'
				};
			}
		},
		methods: {
			// 格式化货币
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 编辑发票
			editInvoice() {
				uni.navigateTo({
					url: `/pageNew/pages/invoice/edit?id=${this.invoice.id}`
				});
			},

			// 删除发票
			deleteInvoice() {
				this.showDeleteModal = true;
			},

			// 关闭删除确认弹窗
			toggleDeleteModal() {
				this.showDeleteModal = false;
			},

			// 确认删除
			confirmDelete() {
				let invoices = uni.getStorageSync('invoices') || [];
				invoices = invoices.filter(inv => inv.id !== this.invoice.id);
				uni.setStorageSync('invoices', invoices);
				this.showDeleteModal = false;
				uni.showToast({
					title: '发票删除成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1500);
			},

			// 处理发票认证
			handleInvoiceAction() {
				this.actionType = 'certify';
				this.showActionModal = true;
			},

			// 处理发票作废
			handleInvoiceInvalid() {
				this.actionType = 'invalid';
				this.showActionModal = true;
			},

			// 关闭操作确认弹窗
			toggleActionModal() {
				this.showActionModal = false;
			},

			// 确认操作
			confirmAction() {
				let invoices = uni.getStorageSync('invoices') || [];
				const index = invoices.findIndex(inv => inv.id === this.invoice.id);
				if (index !== -1) {
					invoices[index].status = this.actionType === 'certify' ? 'completed' : 'invalid';
					uni.setStorageSync('invoices', invoices);
					this.invoice.status = this.actionType === 'certify' ? 'completed' : 'invalid';
				}
				this.showActionModal = false;
				uni.showToast({
					title: this.actionType === 'certify' ? '发票认证成功' : '发票作废成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style>
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.navbar-right {
		display: flex;
		align-items: center;
		gap: 20px;
		padding-right: 4px;
	}

	.nav-btn {
		font-size: 14px;
		font-weight: 500;
		padding: 4px 8px;
		border-radius: 4px;
		cursor: pointer;
	}

	.nav-btn:active {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.edit-btn {
		color: #1e88e5;
	}

	.delete-btn {
		color: #f44336;
	}

	.content-container {
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.form-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.mb-4 {
		margin-bottom: 16px;
	}

	.invoice-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.invoice-title {
		font-size: 18px;
		font-weight: 600;
		color: #1f2937;
	}

	.status-tag {
		padding: 4px 10px;
		border-radius: 999px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.status-tag-text {
		font-size: 12px;
		font-weight: 500;
	}

	.status-tag-pending {
		background-color: rgba(255, 152, 0, 0.1);
	}

	.status-tag-pending .status-tag-text {
		color: #ff9800;
	}

	.status-tag-completed {
		background-color: rgba(76, 175, 80, 0.1);
	}

	.status-tag-completed .status-tag-text {
		color: #4caf50;
	}

	.status-tag-invalid {
		background-color: rgba(244, 67, 54, 0.1);
	}

	.status-tag-invalid .status-tag-text {
		color: #f44336;
	}

	.status-tag-default {
		background-color: rgba(156, 163, 175, 0.1);
	}

	.status-tag-default .status-tag-text {
		color: #9ca3af;
	}

	.invoice-details {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.detail-item {
		display: flex;
	}

	.detail-label {
		width: 96px;
		flex-shrink: 0;
		color: #6b7280;
		font-size: 14px;
	}

	.detail-value {
		flex-grow: 1;
		color: #1f2937;
		font-size: 14px;
	}

	.fixed-operation-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 12px 16px;
		box-sizing: border-box;
		max-width: 750rpx;
		margin: 0 auto;
	}

	.button-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.btn {
		height: 44px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
	}

	.primary-btn {
		background-color: #1e88e5;
		color: #ffffff;
	}

	.primary-btn:active {
		background-color: #1976d2;
	}

	.danger-btn {
		background-color: #f44336;
		color: #ffffff;
	}

	.danger-btn:active {
		background-color: #d32f2f;
	}

	.mr-2 {
		margin-right: 8px;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.modal-overlay.hidden {
		display: none;
	}

	.modal-container {
		width: 90%;
		max-width: 300px;
		background-color: #ffffff;
		border-radius: 8px;
		overflow: hidden;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 600;
		color: #1f2937;
	}

	.modal-content {
		padding: 16px;
	}

	.modal-message {
		font-size: 14px;
		color: #4b5563;
		margin-bottom: 16px;
		display: block;
	}

	.modal-buttons {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.modal-btn {
		padding: 6px 16px;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.cancel-btn {
		background-color: #f3f4f6;
		color: #4b5563;
	}

	.cancel-btn:active {
		background-color: #e5e7eb;
	}

	.confirm-btn {
		color: #ffffff;
	}

	.confirm-btn.primary {
		background-color: #1e88e5;
	}

	.confirm-btn.primary:active {
		background-color: #1976d2;
	}

	.confirm-btn.danger {
		background-color: #f44336;
	}

	.confirm-btn.danger:active {
		background-color: #d32f2f;
	}
</style>